<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 200px;
      height: 200px;
      background-color: #6ff;
      text-align: center;
      line-height: 200px;
    }
  </style>
</head>

<body>
  <!-- 
        H5新增
        自定义属性  用来让开发者对标签添加自定义属性的
        (1)   data-xxx=""  以data-开头 后面自定义   => data-id="1"
        (2)   自己定义    asd="asd"
    
    -->
  <div id="box" class="one two" title="1223123" data-id="1" asd="asd">
    hello world
  </div>

  <!-- 
        id="box" class="one two" title="1223123"  属性节点
        属性节点 => 依存于元素节点
     -->
</body>
<script>
  //  属性节点 => 依存于元素节点
  // 通过元素节点 获取对应的属性节点  => 获取 修改 删除属性
  var box = document.getElementById("box");
  console.log(box);
  // console.log(typeof box);



  // (1) Element.getAttributeNode(key)   根据属性名获取获取属性节点 
  // var idNode = box.getAttributeNode("id");
  // console.log(idNode,typeof idNode);  // id=box  属性节点(本质 对象)
  // var classNode = box.getAttributeNode("class");
  // console.log(classNode);
  // var titleNode = box.getAttributeNode("title");
  // console.log(titleNode);

  // (2) Element.getAttribute(key)    根据属性名获取对应的属性值
  var id = box.getAttribute("id");
  console.log(id);   //"box" 属性值
  var _class = box.getAttribute("class");
  console.log(_class);   //"one two" 属性值
  var title = box.getAttribute("title");
  console.log(title);   //"one two" 属性值

  // (3) Element.setAttribute(key,val)    根据属性名设置对应的属性值  => undefined
  // 标签内 没有该属性就新增 有就修改  => 
  box.setAttribute("id", "BOX");
  box.setAttribute("class", "one second");
  box.setAttribute("title", "哈喽");

  // (4) Element.removeAttribute(key)   根据属性名删除对应的属性
  box.removeAttribute("id");
  box.removeAttribute("class");
  box.removeAttribute("title");



  // (5)   除了可以获取 设置 删除官方给定的属性, 还允许用户 获取 设置 删除 标签内的自定义属性

  // var dataId = box.getAttribute("data-id");
  // console.log(dataId);

  // box.setAttribute("data-id",1000);

  box.removeAttribute("data-id");
  box.removeAttribute("asd");

  console.log("box", box);


    // 注意: 把id删了，前面通过id获取有影响么？
    // 1. 先获取 再删除没有影响  对象是引用类型(提前引用)
    // 2. 先删除 再获取  => 取不到,没有id名



</script>

</html>